.mega-component.read-only-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--mobile-surface-1);
    color: var(--mobile-text-primary);
    padding: 12px;
    border-radius: var(--mobile-border-radius-medium);
    margin-bottom: 24px;
}

.mega-component.read-only-field.grouped {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
}

.mega-component.read-only-field.grouped .divider {
    box-sizing: border-box;
    padding: 2px 12px;
    width: 100%;
    border-bottom: 1px solid var(--mobile-border-strong);
    margin-top: 12px;
}

.mega-component.read-only-field.grouped:not(.hidden) + .read-only-field,
.mega-component.read-only-field.grouped:not(.hidden) + .mega-component.read-only-field.grouped.hidden + .read-only-field {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.mega-component.read-only-field .read-only-label {
    font: var(--mobile-font-caption-large-bold);
    margin-bottom: 8px;
}

.mega-component.read-only-field .read-only-output {
    width: 100%;
    display: flex;
    line-break: anywhere;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font: var(--mobile-font-input-regular);
}

.mega-component.read-only-field .read-only-output .read-only-value {
    font: var(--mobile-font-input-regular);
    margin-right: 16px;
    flex: 1;
}

.read-only-field .read-only-output .read-only-value.monospace-mask {
    font-family: monospace;
}

.mega-component.read-only-field .read-only-output .read-only-value.password-colorized span {
    font: var(--font-input-password);
    letter-spacing: 2px;
}

.mega-component.read-only-field .read-only-output a {
    font: var(--mobile-font-link-large-regular);
    color: var(--mobile-link-primary);
}

.mega-component.read-only-field .read-only-actions {
    display: flex;
    --icon-size: 20px;
    align-items: center;
}

.mega-component.read-only-field .read-only-actions button.icon-only {
    background-color: transparent;
    width: auto;
    height: 20px;
    padding: 0 !important;
    color: inherit;
    --icon-size: 20px;
}

.mega-component.read-only-field .read-only-actions button:last-child:not(:first-child) {
    margin-inline-start: 16px;
}

.mega-component.read-only-field .read-only-actions i {
    cursor: pointer;
    font: var(--mobile-font-copy-regular);
}

.mega-component.read-only-field .read-only-help {
    display: flex;
    margin-top: 8px;
    font: var(--mobile-font-caption-large-regular);
    color: var(--mobile-text-secondary);
}

.mega-component.read-only-field .read-only-help.warning {
    color: var(--mobile-text-warning);
}

.mega-component.read-only-field .read-only-help i {
    margin-top: 3px;
    margin-inline-end: 8px;
}

.mega-component.read-only-field .icon-copy-thin-outline {
    color: var(--mobile-text-secondary);
}
